<template>
    <div v-loading="loading">
        <!-- <el-card class="box-card" v-loading="loading"> -->
            <div slot="header" class="clearfix">

            </div>
            <!-- 三个选择器 -->
            <div class="inputNav">
                <el-select v-model="ranktype" placeholder="请选择" style="width:300px;margin-right:15px;"
                           @change="getRankMsg">
                    <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="normValue" placeholder="请选择" style="width:300px;margin-right:15px;"
                           @change="changerank()">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="type" placeholder="请选择" style="width:200px">
                    <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-button @click="getRank">确定</el-button>
            </div>
            <!-- 柱状图 -->
            <div class="histogram">
                <div id="main" style="width: 82%;height:500px;overflow-y: scroll;"></div>
            </div>

            <div class="histogram">
                <span>{{normValue}}</span>
            </div>
        <!-- </el-card> -->
    </div>
</template>

<style scoped>
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }
    .box-card {
        width: 95%;
        margin: 20px 2.5%;
    }
    .inputNav {
        text-align: center;
    }
    .histogram {
        display: flex;
        justify-content: center;
    }
</style>

<style scoped>
    body{
         height: 828px !important;
    }
</style>
<script type="text/javascript" src="js/echarts.js"></script>
<script>
import { log } from 'util';
    export default {
        data() {
            return {
                loading: false,
                ranktype: '投入排行',
                options1: [{
                    value: '投入排行',
                    label: 0
                }, {
                    value: 1,
                    label: '产出排行'
                }, {
                    value: 2,
                    label: '绩效排行'
                }],
                options: [
                 ],
                options2: [{
                    value:2,
                    label: '总体'
                }, {
                    value:0,
                    label: '大文类'
                }, {
                    value: 1,
                    label: '大理类'
                }
                ],
                normValue: '选项1',
                rankid: 0,
                type: 2,
                cg: ['A0', 'A1', 'A2', 'A3', 'A4', 'A5', 'A6'],
                bD: [1218, 2142, 3100, 581, 431, 383, 163],
                color: ['#53bbdc']
            }
        },
        mounted() {
            let that = this;
            that.loading = true;
            that.getRankMsg();
        },
        methods: {
            //获取指标数据
            getHistogram: function () {
                var self = this;
                this.loading = true;
            },

            // 渲染柱状图
            histogram: function () {
                var that = this;
                this.loading = true;
                var myChart = that.$echarts.init(document.getElementById('main'));

                //初始化数据
                var category = this.cg;
                var barData = this.bD;
                var option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: category,
                        splitLine: {show: true},
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        offset: 10,
                        nameTextStyle: {
                            fontSize: 15
                        }
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'bar',
                            data: barData,
                            barWidth: 20,
                            barGap: 10,
                            smooth: true,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'right',
                                    offset: [5, -2],
                                    textStyle: {
                                        color: '#000',
                                        fontSize: 13
                                    }
                                }
                            },
                            itemStyle: {
                                //通常情况下：
                                normal: {
                                    //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                    color: function (params) {
                                        var colorList = that.color;
                                        return colorList[params.dataIndex];
                                    }
                                },
                            }
                        }
                    ]
                };
                myChart.setOption(option);
                this.loading = false
            },
            
            //确定后的数据分析柱状图方法
            getRank() {
                // http://www.rg.com/root/perdata?type=2&p_id=1
                var that = this;
                that.loading = true
                var url = '/api/watcher/getPerData'
                if(that.ranktype == 2){
                    var url = '/api/watcher/getPerForData'
                }
        

                 that.$http({
                        method: "get",
                        url: url,
                            params: { 
                                type:that.type,
                                p_id:that.rankid,
                                year:2019
                            }
                }).then(function (res) {
                    if(res.data.code == 0){
                        var data = res.data.data;
                        console.log(data);
                        var dataArr = [];
                        var count = 0;
                        var len = 0;
                        for (var k in data) {
                            dataArr[k] = data[k];
                            count += data[k];
                            len++;
                        }
                        var avg = count / len;
                        avg = parseFloat(avg.toFixed(4));
                        dataArr['平均值'] = avg;

                        var tmp = [];
                        var index_t = 0;
                        for (var k in dataArr) {
                            tmp[index_t] = [k, dataArr[k]]
                            index_t++;
                        }
                        tmp.sort(function (a, b) {
                            if (a[1] < b[1]) {
                                return -1;
                            }
                            if (a[1] > b[1]) {
                                return 1;
                            }
                            return 0;
                        });
                        var ks = [];
                        var v = [];
                        index_t = 0;
                        for (var k in tmp) {
                            ks[index_t] = tmp[k][0];
                            v[index_t] = tmp[k][1];
                            index_t++;
                        }
                        that.cg = ks;
                        that.bD = v;
                        var t_color = [];
                        for (var i = 0; i < ks.length; i++) {
                            if (ks[i] != '平均值') {
                                t_color.push('#53bbdc')
                            } else {
                                t_color.push('#f58c28')
                            }
                        }
                        that.color = t_color;
                        that.histogram();
                    }else{
                        that.$message.error(res.data.message);
                        that.loading = false;
                    }
                })
            },

            //动态获取后面下拉框的值
            getRankMsg() {
                var that = this;
                this.loading = true;
                var typerank = isNaN(that.ranktype) ? 0 : that.ranktype;
                that.options=[];
                    that.$http({
                            method: "get",
                                url:"/api/watcher/getRankMsg",
                                params: {
                                    type:typerank
                                }
                    })
                    .then(function(response) {
                        if (response.data.code === 0) {
                            console.log(response.data.data);
                            for(var key in response.data.data){
                                console.log(response.data.data[key]);
                                that.options.push({value:key, label:response.data.data[key]});
                            }
                            that.normValue = that.options[0].label;
                            
                            that.rankid = that.options[0].value;
                        // _this.$message.success("查询指标成功");
                        } else {
                            _this.$message.error(response.data.message);
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
                    this.loading = false;
                // axios.get('/root/getrankmsg', {
                //     params: {
                //         type: isNaN(that.ranktype) ? 0 : that.ranktype
                //     }
                // }).then(res => {
                //     if (res.data.code == 0) {
                //         that.options = [];
                //         for (var i = 0; i < res.data.result.length; i++) {
                //             that.options[i] = {value: res.data.result[i].id, label: res.data.result[i].name}
                //         }
                //         that.normValue = that.options[0].label;
                //         that.rankid = that.options[0].value;
                //     } else {
                //         that.message(true, res.data.msg, 'error');
                //     }
                // })
            },
            changerank() {
                this.rankid = isNaN(this.normValue) ? that.options[0].value : this.normValue
            },

            //
            // init() {
                // var that = this;
                // that.loading = true;
                //    that.$http({
                //     method: "get",
                //     url:"https://localhost:8088/watcher/getPerForData",
                //     params: {
                //         type:1,
                //         p_id:1,
                //         year:2018
                //     }
                // })
                // .then(function (response) {
                //     //  if (res.data.code == 0) {
                // //         that.options = [];
                // //         for (var i = 0; i < res.data.result.length; i++) {
                // //             that.options[i] = {
                //     // value: res.data.result[i].id, 
                //     // label: res.data.result[i].name
                //     // }
                // //         }
                // //         that.normValue = that.options[0].label;
                // //         that.rankid = that.options[0].value;
                // //         that.getRank();
                // //     } else {
                // //         that.message(true, res.data.msg, 'error');
                // //     }
                // that.loading=false;
                // })
                // .catch(function (error) {
                //     console.log(error);
                // });

                // axios.get('/root/getrankmsg', {
                //     params: {
                //         type: isNaN(that.ranktype) ? 0 : that.ranktype
                //     }
                // }).then(res => {
                //     if (res.data.code == 0) {
                //         that.options = [];
                //         for (var i = 0; i < res.data.result.length; i++) {
                //             that.options[i] = {value: res.data.result[i].id, label: res.data.result[i].name}
                //         }
                //         that.normValue = that.options[0].label;
                //         that.rankid = that.options[0].value;
                //         that.getRank();
                //     } else {
                //         that.message(true, res.data.msg, 'error');
                //     }
                // })
            // }
        },
   
    }
</script>